<template>
    <div
        class="flex-2"
        :style="{
            height: regionHeight + 'px',
            overflow: 'auto',
            boxSizing: 'border-box',
            borderLeft: '4px #e6e6e6 solid',
            padding: '0 20px'
        }"
    >
        <!-- 模板信息 -->
        <div
            class="flex align-center justify-between pad-y-10 pad-x-20 bg-1677ff color-white cur-pointer border-rad-3"
            @click="handleSetSlide(1)"
        >
            <h4>模板基础信息</h4>
            <i :class="(isSlide ? 'el-icon-arrow-down' : 'el-icon-arrow-up')"></i>
        </div>
        
        <div ref="tempBasis">
            <div class="flex align-center text-nowrap mar-t-10">
                <span>模板名称：</span>
                <el-input v-model="name" placeholder="请输入模板名称" size="small" clearable @input="handleWatchInput"></el-input>
            </div>

            <div class="flex align-center mar-t-10">
                <div class="flex align-center text-nowrap mar-r-10">
                    <span>模板宽度：</span>
                    <el-input v-model="tempWidth" placeholder="宽度(像素/px)" size="small" clearable @input="handleWatchInput"></el-input>
                </div>

                <div class="flex align-center text-nowrap">
                    <span>模板高度：</span>
                    <el-input v-model="tempHeight" placeholder="高度(像素/px)" size="small" clearable @input="handleWatchInput"></el-input>
                </div>
            </div>
        </div>

        <!-- 组件部分 -->
        <div
            class="flex align-center justify-between pad-y-10 pad-x-20 bg-1677ff color-white mar-t-10 cur-pointer border-rad-3"
            @click="handleSetSlide(2)"
        >
            <h4>组件</h4>
            <i :class="(isToggle ? 'el-icon-arrow-down' : 'el-icon-arrow-up')"></i>
        </div>

        <div ref="componentBox">
            组件列表
        </div>

        <!-- 属性部分 -->
        <div
            v-if="checkSelectedEl()"
            class="flex align-center justify-between pad-y-10 pad-x-20 bg-1677ff color-white mar-t-10 cur-pointer border-rad-3"
            @click="handleSetSlide(3)"
        >
            <h4>属性</h4>
            <i :class="(isExpand ? 'el-icon-arrow-down' : 'el-icon-arrow-up')"></i>
        </div>

        <div v-if="checkSelectedEl()" ref="attrRef">
            属性
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        name: 'TempConfig',

        computed: {
            ...mapState({
                regionHeight: state => state.printTemplate.regionHeight,
                pageList: state => state.printTemplate.pageList,
            }),

            // 检测是否有元素被选中
            checkSelectedEl() {
                return () => {
                    let arr = this.pageList.filter(item => item.isSelected)

                    if (arr.length > 0) {
                        return true
                    }

                    return false
                }
            },
        },

        data() {
            return {
                name: '', // 模板名称
                tempWidth: '', // 模板宽度
                tempHeight: '', // 模板高度
                isSlide: true, // 模板信息，true 展开， false 收缩
                isToggle: true, // 组件，true 展开， false 收缩
                isExpand: true, // 属性，true 展开， false 收缩
            }
        },

        methods: {
            // 监听模板名称
            handleWatchInput(e) {
                this.$store.commit('printTemplate/setTempName', e)
            },

            // 设置展开收起
            handleSetSlide(type) {
                let tempBasis = this.$refs.tempBasis
                let componentBox = this.$refs.componentBox
                let attrRef = this.$refs.attrRef

                if (type === 1) {
                    tempBasis.animate([
                        { maxHeight: (this.isSlide ? this.regionHeight / 2 : 0) + 'px', opacity: this.isSlide ? 0 : 1, dispaly: this.isSlide ? 'block' : 'none' },
                        { maxHeight: (this.isSlide ? 0 : this.regionHeight / 2) + 'px', opacity: this.isSlide ? 0 : 1, display: this.isSlide ? 'none' : 'block' }
                    ], {
                        duration: 200,
                        fill: 'forwards'
                    })
                    
                    this.isSlide = !this.isSlide
                }

                if (type === 2) {
                    componentBox.animate([
                        { maxHeight: (this.isToggle ? this.regionHeight / 2 : 0) + 'px', opacity: this.isToggle ? 0 : 1, dispaly: this.isToggle ? 'block' : 'none' },
                        { maxHeight: (this.isToggle ? 0 : this.regionHeight / 2) + 'px', opacity: this.isToggle ? 0 : 1, display: this.isToggle ? 'none' : 'block' }
                    ], {
                        duration: 200,
                        fill: 'forwards'
                    })
                    
                    this.isToggle = !this.isToggle
                }

                if (type === 3) {
                    attrRef.animate([
                        { maxHeight: (this.isExpand ? this.regionHeight / 2 : 0) + 'px', opacity: this.isExpand ? 0 : 1, dispaly: this.isExpand ? 'block' : 'none' },
                        { maxHeight: (this.isExpand ? 0 : this.regionHeight / 2)+ 'px', opacity: this.isExpand ? 0 : 1, display: this.isExpand ? 'none' : 'block' }
                    ], {
                        duration: 200,
                        fill: 'forwards'
                    })

                    this.isExpand = !this.isExpand
                }
            },
        },

        props: {
            // 操作区域高度
            operateHeight: {
                type: Number,
                default: 0
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
